<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!--
        插槽是指HTML起始标签与结束标签之间的内容。
        插槽的核心作用就是把组件内部的元素抽离出来给外部进行实现，
    -->

<div id="app">
    <!-- 我们在组件中间添加了内容，我们要求组件标记一个位置告知把这个内容放在哪里 -->
    <my-container></my-container>
</div>

<script>
    const {createApp} = Vue
    const app = createApp({})
    // 定义一个容器组件
    const containerComponent = {
        template:`<div style="border-style:solid;border-color:red;border-width:5px">
        <!--
            这里的slot标签就是告诉vue我们子组件中间的内容放在这个位置
            我们可以在插槽这里定义默认的内容，当我们模板中没有提供内容时会显示这个默认的内容，而当模板中提供了内容则不会显示这里的默认内容
         -->
        <slot>
            对于插槽标记的位置我们可以定义默认内容
        </slot>
    </div>`
    }
    app.component("my-container",containerComponent)
    app.mount("#app")
</script>
</body>
</html>